<template>
	<view>
		<u-search placeholder="查找用户或分享秘籍" v-model="keyword" shape="round" @change="change" @search="onSearch"
			@custom="goBack" actionText="取消" margin="20rpx"></u-search>
		<view class="hist">
			搜索记录
			<ul>
				<li v-for="item,index in hist" :key="index">
					{{item.text}}
				</li>
			</ul>
		</view>
		<view class="hot">
			热门搜索
			<ul>
				<li v-for="item,index in hot" :key="index">
					{{item.text}}
				</li>
			</ul>
		</view>
		<view class="tuijian">
			推荐板块

			<u-scroll-list>
				<view v-for="(item, index) in list" :key="index">
					<image :src="item.thumb"></image>
				</view>
			</u-scroll-list>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 搜索值
				keyword: '',
				// 记录
				hist: [{
					text: '内部'
				}, {
					text: '内部'
				}],
				hist1: [],
				// 热门搜索
				hot: [{
					text: 'ddd'
				}],
				// 推荐板块,
				// tuijian: [],
				list: [{
					thumb: "https://gd-hbimg.huaban.com/193f86d2442c53372cf51dd64e53579497958f4c70d7-7f5MIJ_fw240webp"
				}, {
					thumb: "https://gd-hbimg.huaban.com/773d49b23d034e8c7f4ec1a77a12e15c81a4646d120cb8-VLPnTE_fw658webp"
				}, {
					thumb: "https://gd-hbimg.huaban.com/12b80d9050fd20bcd2078c1173823ddddf275dde8090c-Dfytwy_fw658webp"
				}, {
					thumb: "https://gd-hbimg.huaban.com/9e639f2ec1d944797606c1fb3a2dbf5a35debc7118e8-27zn5Y_fw658webp"
				}, {
					thumb: "https://gd-hbimg.huaban.com/af7ca4426b8a728217636e86d57c2a9416f44c1a3b2f1-e0Kw8c_fw658webp"
				}]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			onSearch(val) {
				console.log(val);

			},
			change(val) {
				console.log(val);
				this.hist.push({
					"text": this.keyword
				})
				console.log(this.hist);
			}
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.hist {
		width: 100%;
		margin-bottom: 20px;

		ul {
			width: 100%;
			list-style: none;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			li {
				border: 1px solid #33cc66;
				margin: 10rpx 10rpx;
				padding: 8rpx;
			}
		}


	}

	.hot {
		width: 100%;
		margin-bottom: 20px;

		ul {
			width: 100%;
			list-style: none;
			display: flex;
			justify-content: flex-start;

			li {
				border: 1px solid #33cc66;
				margin: 10rpx 10rpx;
				padding: 8rpx;
			}
		}
	}
</style>
